<div div style="background-color:#eef0f5;width: 100%;height: 800px">
    <div class="font4" style="margin:0 0 1% 2%;padding-top:1%;font-size: 20px;font-weight: 550;">
        账号信息
    </div>
    <div style="margin: 0px 2%;background-color: white;height: 90%;width: 96%;padding: 2%">
        <div nz-row>
            <div style="float: left;">
                <nz-avatar [nzSize]="90" nzIcon="user" nzSrc="../assets/images/user.png"></nz-avatar>
            </div>
            <div nz-col nzSpan="20" style="float: left;margin-left: 40px;">
                <div class="font4">
                    基本信息
                </div>
                <div nz-row style="margin-top: 25px; ">
                    <div nz-col nzSpan="3" class="font5">
                        账户ID</div>
                    <div nz-col nzSpan="5" class="font6">
                        123456789
                    </div>
                </div>
                <div nz-row style="margin-top:17px ">
                    <div nz-col nzSpan="3" class="font5">
                        用户名
                    </div>
                    <div nz-col nzSpan="5" class="font6">
                        123456789
                    </div>
                    <div nz-col nzSpan="1" class="font6">
                        <a>修改</a>
                    </div>
                </div>
                <div nz-row style="margin-top:17px ">
                    <div nz-col nzSpan="3" class="font5">
                        密码
                    </div>
                    <div nz-col nzSpan="5" class="font6">
                        123456789
                    </div>
                    <div nz-col nzSpan="1" class="font6">
                        <a>修改</a>
                    </div>
                </div>
                <div class="font4" style="margin-bottom:25px;margin-top: 25px">
                    华为云信息
                </div>
                <div nz-row style="margin-bottom:17px ">
                    <div nz-col nzSpan="3" class="font5">
                        华为云账号
                    </div>
                    <div nz-col nzSpan="20" class="font6">
                        123456789
                    </div>
                </div>
                <div nz-row>
                    <div nz-col nzSpan="3" class="font5">
                        IAM用户名
                    </div>
                    <div nz-col nzSpan="5" class="font6">
                        123456789
                    </div>
                </div>

                <div class="font4" style="margin-bottom:25px;margin-top: 25px">
                    激活信息
                </div>
                <div nz-row style="margin-bottom:17px ">
                    <div nz-col nzSpan="3" class="font5">
                        激活时间
                    </div>
                    <div nz-col nzSpan="20" class="font6">
                        123456789
                    </div>
                </div>
                <div nz-row style="margin-bottom:17px ">
                    <div nz-col nzSpan="3" class="font5">
                        到期时间
                    </div>
                    <div nz-col nzSpan="5" class="font6">
                        123456789
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<nz-modal class="changeusername" [(nzVisible)]="!isVisible" nzCentered [nzFooter]=null>
    <ng-container *nzModalContent>
        <div>
            <div class="module-title">修改用户名</div>
        </div>
        <div class="module-data">新用户名</div>
        <input type="text" class="module-input" value="默认显示原用户名" />
        <button class="renewbutton-ok" (click)="clickok()">确认修改</button>
        <button class="renewbutton-cancel" (click)="clickcancel()">取消</button>
    </ng-container>
</nz-modal>

<nz-modal class="changepassword" [(nzVisible)]="!isVisible" nzCentered [nzFooter]=null>
    <ng-container *nzModalContent>
        <div>
            <div class="module-title">修改密码</div>
        </div>
        <div>
            <div class="module-data">新密码</div>
            <input type="text" class="module-input" style="margin-left: 82px;" placeholder="请输入新密码" />
        </div>
        <div class="module-data">确认密码</div>
        <input type="text" class="module-input" placeholder="请再次输入密码" />
        <button class="renewbutton-ok" (click)="clickok()">确认修改</button>
        <button class="renewbutton-cancel" (click)="clickcancel()">取消</button>
    </ng-container>
</nz-modal>